<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tooltip浮动提示框效果</title>
  <style>
    *{
      margin:0;
      padding:0;
    }

    body{
      font: 14px/1.8 "Microsoft YaHei","微软雅黑";
      background: url("img/tooltip/bg.jpg") no-repeat center top;
    }

    #demo{
      width: 500px;
      margin:30px auto;
      padding:20px 30px;
      position: relative;
      background-color: #f5f5f5;
      border-radius: 10px;
      box-shadow: 0 0 0 6px rgba(0,0,0,0.2);
    }

    #demo h2, #demo .tooltip{
      color: #0099ff;
    }

    #demo .tooltip{
      cursor:help;
    }
    .tooltip-box{
      display: block;
      background: #fff;
      line-height:1.6;
      border:1px solid #66ccff;
      color: #333;
      padding: 14px;
      font-size: 12px;
      border-radius: 5px;
      overflow: auto;
    }

    #mycard img{
      float: left;
      width: 100px;
      height:100px;
      padding: 10px;
    }

    #mycard p{
      float: left;
      width: 150px;
      padding: 0 10px;
    }
  </style>
</head>
<body>
<section id="demo">
  <h2>原生JavaScript实现Tooltip效果</h2>
  <p>Tooltip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
      比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>，<a class="tooltip" id="tooltip2">NBA</a>。
      又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会吗？如果不看Tooltip提示你背不出来的话，
      那么你可要加油了。
  </p>
  <p>
    Tooltip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
    <a class="tooltip" id="tooltip5">我的资料</a>。
  </p>
  <p>
    甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。
  </p>
  <p>
    注意好的Tooltip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的Tooltip效果。
  </p>
</section>

<script>
  function addEvent(element,event,callbackFunction) {
    if (element.addEventListener){
      element.addEventListener(event, callbackFunction, false);
    }else if (element.attachEvent){
      element.attachEvent('on'+event, callbackFunction);
    }

  }

  var tooltipBoxClass = "tooltip-box";

  var getEl = function (id) {
    return document.getElementById(id);
  };

  var demo = getEl("demo");
  //obj - Tooltip超链接元素
  //id - Tooltip提示框ID
  //html - Tooltip提示框内容
  //width、height(可选)
  function showTooltip(obj, id, html, width, height) {
    if(getEl(id) == null){
      //创建 <div class="tooltip-box">xxxxx</div>
      var tooltipBox;
      tooltipBox = document.createElement("div");
      tooltipBox.className = tooltipBoxClass;
      tooltipBox.id = id;
      tooltipBox.innerHTML = html;
      obj.appendChild(tooltipBox);

      tooltipBox.style.width = width? width+"px":"auto";
      tooltipBox.style.height = height? height+"px":"auto";

      tooltipBox.style.position = "absolute";
      tooltipBox.style.display = "block";

      var left = obj.offsetLeft;
      var top = obj.offsetTop;

      //left, 不让Tooltip提示框超出浏览器
      if(left + tooltipBox.offsetWidth > document.body.clientWidth){
        var demoLeft = demo.offsetLeft;
        left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft;
        if (left < 0) left = 0;
      }

      tooltipBox.style.left = left + "px";
      tooltipBox.style.top = top + 20 + "px";

      addEvent(obj, "mouseleave", function () {
        setTimeout(function () {
        getEl(id).style.display = "none";
      }, 300);
      });

    }else{
      //显示
      getEl(id).style.display = "block";
    }
  }

  addEvent(demo,"mouseover",function (e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;

    if(target.className == "tooltip"){
      var _html;
      var _id;
      var _width = 200;

      switch (target.id){
        case "tooltip1":
          _id = "t1";
          _html = "中华人民共和国";
          break;
        case "tooltip2":
          _id = "t2";
          _html = "美国篮球职业联赛";
          break;
        case "tooltip3":
          _id = "t3";
          _html = "<h2>春晓</h2>" +
                  "<p>春眠不觉晓，</p>" +
                  "<p>处处闻啼鸟。</p>" +
                  "<p>夜来风雨声，</p>" +
                  "<p>花落知多少。</p>";
          _width = 100;
          break;
        case "tooltip4":
          _id = "t4";
          _html = "<img src='img/tooltip/1.jpg' width='400' />";
          _width = 400;
          break;
        case "tooltip5":
          _id = "t5";
          _html = "<div id='mycard'><img src='img/tooltip/2.jpg' alt='' />" +
                  "<p><strong>昵称一定要长</strong></p><p>我的简介</p></div>";
          break;
        case "tooltip6":
          _id = "t6";
          _html = '<iframe src="http://www.imooc.com/" width="380" height="300"></iframe>';
          _width = 400;
          break;
        default:
          return false;
      }
      showTooltip(target, _id, _html, _width);
    }
  });

</script>
</body>
</html>